<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 排行榜大容器样式 */
    .title {
      width: 400px;
      height: 830px;
      background-color: #e72627;
      text-align: center;
    }
    /* 排行榜标题样式 */
    .rank-title {
      color: white;
      padding: 10px 0;
      margin: 0;
    }
    /* 标签栏容器：改为弹性布局，让两个标签均分宽度 */
.tab-bar {
  display: flex;
  background-color: #e72627; /* 保持与大容器背景一致 */
  padding: 0 20px; /* 左右内边距，避免贴边 */
}

/* 单个标签通用样式：弹性布局（图标+文字垂直居中）、文字颜色、内边距等 */
.tab1, .tab2 {
  flex: 1; /* 两个标签均分宽度 */
  display: flex; /* 让图标和文字横向排列并居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  color: white;
  padding: 10px 0; /* 上下内边距，控制高度 */
  margin-bottom: 10px;
  
}

/* 选中态标签（好文精选）：特殊背景、圆角 */
.tab1 {
  background-color: #ce2425; /* 深红背景，模拟图二选中色 */
  border-radius: 10px; /* 圆角优化 */
}

/* 未选中态标签（热门资讯）：背景与大容器一致*/
.tab2 {
  background-color: #df3f3f; /* 与大容器背景同色，模拟未选中 */
}


/* 标签内图标样式：控制大小、与文字间距 */
.tab1 img, .tab2 img {
  width: 20px; /* 图标宽度，可根据实际图标调整 */
  height: 20px; /* 图标高度，可根据实际图标调整 */
  margin-right: 6px; /* 图标与文字的间距 */
}
    
    .body1{
      width: 400px;
      height: 40px;
      background-color: white;
      text-align: center; /* 让内部元素水平居中 */
      border-radius: 5px 5px 0 0;
      display: flex; /* 使用flex布局 */
      align-items: center; /* 垂直居中 */
      /* justify-content: center; 水平居中 */
      padding: 0 10px; /*给白色区域左右添加内边距，避免内容接触边界*/
      box-sizing: border-box; /* 确保内边距不会撑大容器 */
    } 
    .body1 .a{
      width: 60px;
      height: 25px;
      background-color: red;
      text-align: center; /* 让文字居中显示 */
      color: white; /* 设置文字颜色为白色，更清晰 */
      border-radius: 5px; /* 给按钮添加圆角 */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .body {
     width: 400px;
     height: 700px;
     background-color: #eeeeee;
     padding-top: 1px; /* 新增：阻止外边距折叠 */
     /* 或使用 border-top: 1px solid transparent; */
    box-sizing: border-box; /* 确保内边距不影响整体尺寸 */
}
    /* 关键：给.photo1加相对定位，作为子元素绝对定位的参考 */
.photo1{
  width: 360px;
  height: 200px;
  background-color: #ffffff;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: column; 
  text-align: left;
  position: relative; /* 新增：子元素绝对定位的参考 */
}

/* 评论/点赞容器：固定在右下角 */
.interact {
  position: absolute;
  bottom: 10px;   /* 距离底部10px */
  right: 10px;    /* 距离右侧10px */
  display: flex;  /* 让评论和点赞横向排列 */
  gap: 15px;      /* 评论和点赞之间的间距 */
}
/* 
评论/点赞通用样式 */
.comment, .like {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
} 
/* 图标样式（用背景图模拟，也可换字体图标） */
.icon-comment, .icon-like {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-size: cover;
}

/* 评论图标 */
.icon-comment {
  background-image: url("2025-09-28 002733.png");
  /* 新增：设置宽高，让背景图能显示出来 */
  width: 22px; 
  height: 20px;
  display: inline-block; /* 行内元素默认不支持宽高，需转为行内块 */
}

/* 点赞图标（修正属性 + 补全宽高） */
.icon-like {
  background-image: url("2025-09-28 002845.png"); /* 把 border-image 改成 background-image */
  width: 20px; 
  height: 20px;
  display: inline-block;
}
    .top1{
      width: 50px; /* 保持原宽度 */
      height: 20px;;
    }
    .top1-content{
      width: 300px;
      height: 80px; 
    }
  </style>
</head>
<body>
  <div class="title">
    <h3 class="rank-title">排行榜</h3>
    <div class="tab-bar">
      <div class="tab1">
        <img src="./icon_article.png" alt="好文精选图标"> 好文精选
      </div>
      <!-- 热门资讯（未选中态） -->
      <div class="tab2">
        <img src="./icon_hot.png" alt="热门资讯图标"> 热门资讯
      </div>
    </div>
    <div class="body1">
      <div class="a">
        <span>文章</span>
      </div>
    </div>
    <div class="body">
       <div class="photo1">
         <img src="./rank-top1.png" alt="" class="top1">
         <img src="sku-1.jpg" alt="" class="top1-content">
         <h4>安卓电视通过KODI看IPTV</h4>
         <div class="interact">
          <span class="comment">
            <i class="icon-comment"></i> 105
          </span>
          <span class="like">
            <i class="icon-like"></i> 345
          </span>
        </div>
       </div>
       
       <div class="photo1">
        <img src="./rank-top2.png" alt="" class="top1">
         <img src="sku-2.jpg" alt="" class="top1-content">
         <h4>起跑线26期:5km跑步,你到了哪一级别?学会这几个跑步技巧,助你提升P8</h4>
         <div class="interact">
          <span class="comment">
            <i class="icon-comment"></i> 151
          </span>
          <span class="like">
            <i class="icon-like"></i> 132
          </span>
        </div>
       </div>

       <div class="photo1">
        <img src="./rank-top3.png" alt="" class="top1">
        <img src="sku-4.jpg" alt="" class="top1-content">
        <div class="interact">
         <span class="comment">
           <i class="icon-comment"></i> 105
         </span>
         <span class="like">
           <i class="icon-like"></i> 345
         </span>
       </div>
       </div>

    </div>
  </div>


  
</body>
</html>